<template>
	<view class="item travel-item">
		<view class="item-cover">
			<image :src="travel.cover" @load="imgActive" mode="scaleToFill" style="height:210upx" class="uni-lazyload" :class="active ? 'active' : ''"></image>
		</view>
		<view class="item-content-box">
			<view class="item-content-box-title">{{ travel.title }}</view>
			<view class="item-content-box-content">{{ travel.content }}</view>
			<view class="item-content-box-price">
				<view class="item-content-box-price-box">
					<view class="price-show">
						{{ travel.price }}
						<view class="unit">A积分</view>
					</view>
				</view>
				<view class="item-content-box-btn"><button class="btn-xs btn-primary btn-block" @click="bindClick">预订</button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		travel: {
			type: Object,
			default: function(e) {
				return {
					title: '加载中...',
					content: '---',
					price: '--'
				};
			}
		}
	},
	data() {
		return {
			active: false,
		};
	},
	methods: {
		bindClick() {
			this.$emit('click');
		},
		imgActive() {
			console.log(JSON.stringify(this.travel));
			this.active = true;
		}
	}
};
</script>

<style>
.uni-lazyload {
	opacity: 0;
	transition: all 0.3s ease-in-out;
	height: 100%;
}
.uni-lazyload.active {
	opacity: 1;
	transition: all 0.3s ease-in-out;
}
</style>
